<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    width="600px"
    :title="dialogTitle"
    :visible="showDialog"
    @close="close"
  >
    <el-form
      ref="freightForm"
      :model="freightForm"
      :rules="rulesForm"
      label-width="130px"
    >
      <el-form-item
        label="模板类型"
        prop="templateType"
      >
        <el-select
          v-model="freightForm.templateType"
          placeholder="请选择模板类型"
          suffix-icon="el-icon-circle-close"
          :clearable="true"
        >
          <el-option
            v-for="item in templateTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
      >
        <el-select
          v-model="freightForm.transportType"
          placeholder="请选择运送类型"
          suffix-icon="el-icon-circle-close"
          :clearable="true"
        >
          <el-option
            v-for="item in transportTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="关联城市"
        prop="associatedCityList"
      >
        <el-checkbox-group
          v-if="freightForm.templateType === 3"
          v-model="freightForm.associatedCityList"
        >
          <el-checkbox label="2">京津冀</el-checkbox>
          <el-checkbox label="3">江浙沪</el-checkbox>
          <el-checkbox label="4">川渝</el-checkbox>
          <el-checkbox label="5">黑吉辽</el-checkbox>
        </el-checkbox-group>
        <el-checkbox
          v-else
          v-model="freightForm.associatedCityList"
          class="all-regions"
        >全国</el-checkbox>
      </el-form-item>
      <el-form-item
        label="首重价格"
        prop="firstWeight"
      >
        <el-input
          v-model.number="freightForm.firstWeight"
          placeholder="请输入首重价格"
        >
          <template slot="suffix">
            <span class="input-r-text">元</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
      >
        <el-input
          v-model.number="freightForm.continuousWeight"
          placeholder="请输入续重价格"
        >
          <template slot="suffix">
            <span class="input-r-text">元</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
      >
        <el-input
          v-model.number="freightForm.lightThrowingCoefficient"
          placeholder="请输入轻抛系数"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="foot-box">
        <el-button
          type="primary"
          class="ok-btn"
          @click="freightSubmit"
        >确认</el-button>
        <el-button
          plain
          class="cancel"
          @click="close"
        >取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { freightManageOperate, freightManageList } from '@/api/transit'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    const templateTypeValidator = async (role, val, callback) => {
      let { data } = await freightManageList()

      if (this.freightForm.id) {
        data = data.filter((item) => item.id !== this.freightForm.id)
      }
      // 校验模板是否存在
      const isTemplateType = data.some(
        (item) =>
          item.templateType === val &&
          item.transportType === this.freightForm.transportType
      )
      if (this.freightForm.templateType === 3) {
        // 遍历数据
        const arr = []
        data.forEach((item) => {
          // 判断选择是否为经济区
          if (item.templateType === 3) {
            //  判断运送类型
            if (item.transportType === this.freightForm.transportType) {
              arr.push(item.associatedCityList)
            }
          }
        })

        // 判断关联城市值是否有相同的
        const hasMatch = arr.some((item) =>
          item.some((val) => this.freightForm.associatedCityList.includes(val))
        )
        hasMatch ? callback(new Error('经济区互寄关联城市重复')) : callback()
      }
      // 判断非经济区模板
      isTemplateType
        ? callback(new Error('非经济区的模板重复，只能有一个模板'))
        : callback()
    }
    return {
      freightForm: {
        templateType: null, // 模板类型
        transportType: null, // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: '' // 轻抛系数
      }, // 表单
      rulesForm: {
        templateType: [
          {
            required: true,
            message: '模板类型不能为空',
            trigger: ['change', 'blur']
          },
          {
            validator: templateTypeValidator,
            trigger: 'blur'
          }
        ],
        transportType: [
          {
            required: true,
            message: '运送类型不能为空',
            trigger: ['change', 'blur']
          }
        ],
        associatedCityList: [
          {
            required: true,
            validator: (role, val, callback) => {
              if (this.freightForm.templateType === 3) {
                if (val.length === 0) {
                  callback(new Error('请输入关联城市'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' },
          {
            pattern: /^(?:[1-9]\d{0,2}(?:\.\d)?|999)$/,
            message: '输入范围1-999任意数值',
            trigger: 'blur'
          }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' },
          {
            pattern: /^(?:[1-9]\d{0,2}(?:\.\d)?|999)$/,
            message: '输入范围1-999任意数值',
            trigger: 'blur'
          }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' },
          {
            pattern: /^(?:[1-9]\d{0,4}|99999)$/,
            message: '请输入1-99999之间任意整数',
            trigger: 'blur'
          }
        ]
      }, // 校验
      templateTypeList: [
        {
          label: '同城寄',
          value: 1
        },
        {
          label: '省内寄',
          value: 2
        },
        {
          label: '经济区互寄',
          value: 3
        },
        {
          label: '跨省',
          value: 4
        }
      ], // 模板类型
      transportTypeList: [
        {
          label: '普快',
          value: 1
        },
        {
          label: '特快',
          value: 2
        }
      ] // 运送类型
    }
  },
  methods: {
    // 表单数据回显
    showedit(row) {
      this.freightForm = row.editDetail
    },
    // 提交按钮
    async freightSubmit() {
      // 判断当模板为经济区互寄时清除默认选择的值
      if (this.freightForm.templateType !== 3) {
        this.freightForm.associatedCityList = ['1']
      }
      try {
        await this.$refs.freightForm.validate()
        // 发送新增或修改请求
        await freightManageOperate(this.freightForm)
        // 切换提示信息
        if (this.freightForm.id) {
          this.$message.success('修改成功')
        } else {
          this.$message.success('添加成功')
        }
        // 重新渲染
        this.$emit('getList')
        this.close()
      } catch (err) {
        console.log('校验未通过')
      }
    },
    // 关闭弹层
    close() {
      this.$emit('update:showDialog', false)
      this.freightForm = {
        templateType: null,
        transportType: null,
        associatedCityList: [],
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: ''
      }
      this.$refs.freightForm.resetFields()
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-form-item__label {
  font-weight: 400;
}
::v-deep .el-dialog__body {
  padding: 40px 60px 0;
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__footer {
  padding: 14px 30px 38px;
}
.foot-box {
  display: flex;
  justify-content: center;
  .el-button {
    width: 90px;
    height: 40px;
  }
  .ok-btn {
    background: #e15536;
    border-radius: 4px;
    border: transparent;
    &:hover {
      width: 90px;
      height: 40px;
      background: #ffab98;
      border-radius: 4px;
    }
  }
}
.input-r-text {
  margin-right: 14px;
  color: #20232a;
  font-size: 14px;
}
.all-regions {
  pointer-events: none;
  ::v-deep .el-checkbox__input {
    display: none;
  }
  ::v-deep .el-checkbox__label {
    padding-left: 0;
  }
}
.cancel {
  margin-left: 20px;
}
</style>
